<template>
  <!-- 主体区域 -->
  <section id="app">
    <TodoHead @add="handleAdd"></TodoHead>
    <TodoMain @del="handleDel" :list="list"></TodoMain>
    <TodoFooter @clear="handleClear" :list="list"></TodoFooter>
    
  </section>
</template>

<script>
import TodoHead from './components/TodoHead.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
//渲染功能：
//1.提供数据在公共的父组件APP.vue
//2.通过父传子，将数据传递给todomain
//3.利用v-for渲染

//添加功能：
//1.收集表单数据 v-model
//2.监听事件（回车+点击 都要进行添加）
//3.子传父，将任务名称传递给父组件app.vue
//4.进行添加 unshift（自己的数据自己负责）
export default {
  data () {
    return {
      list: JSON.parse(localStorage.getItem('list')) || [
        {id:1,name:'打篮球'},
        {id:2,name:'看电影'},
        {id:3,name:'逛街'},
      ]
    }
  },
  methods:{
    handleAdd(todoname){
        this.list.unshift({
          id: +new Date(),
          name: todoName
        })
    },
    handleDel (id) {
      this.list =this.list.filter(item => item.id !==id)
    },
    handleClear () {
      this.list=[]
    }
  },
  watch:{
    list: {
      deep:true,
      handler (newValue) {
        localStorage.setItem('list' , JSON.stringify(newValue))
      }
    }
  },
  components: {
    TodoHead,
    TodoMain,
    TodoFooter
  }
}
</script>

<style>

</style>
